<template>
  <div class="re-box">
    <div class="cicle-box">
      <div class="white-box">
        <div class="dash-border">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.re-box {
  margin-top: 300px;
  display: flex;
  width: 240px;
  height: 200px;
  background-color: #ee4e4d;
  border-radius: 20px;
  .cicle-box {
    position: relative;
    width: 100%;
    height: 160px;
    background-color: #ee4e4d;
    border-radius: 20px;
    box-shadow: 0px 9px 0px 0.5px rgba(0, 0, 0, 0.1) inset;
    //裁剪半圆
    clip-path: ellipse(120% 100% at 50% 100%);
    //旋转
    transform: rotate(-180deg);
    .white-box {
      position: absolute;
      top: -4px;
      left: 10px;
      width: calc(100% - 20px);
      height: 200px;
      border-radius: 20px;
      background-color: #fff;
      box-shadow: 0px 26px 14px -11px rgba(0, 0, 0, 0.1) inset,
        0px 1px 3px 1px rgba(0, 0, 0, 0.1);
      //裁剪半圆
      clip-path: ellipse(100% 60% at 50% 60%);
      &::before {
        position: absolute;
        left: -5px;
        bottom: 60px;
        display: block;
        content: '';
        width: 12px;
        height: 12px;
        background-color: #ee4e4d;
        border-radius: 50%;
        z-index: 999;
      }
      &::after {
        position: absolute;
        right: -5px;
        bottom: 60px;
        display: block;
        content: '';
        width: 12px;
        height: 12px;
        background-color: #ee4e4d;
        border-radius: 50%;
        z-index: 999;
      }
      .dash-border {
        position: relative;
        bottom: -66%;
        width: 100%;
        border-bottom: 2px dashed #e8e8e8;
      }
    }
  }
}
</style>
